<script setup lang="ts">
import { Chart } from '@vue-chart/echart'
import { markerDataType } from '../market'

interface TableType {
  platform: number,
  realSales: number
}

const props = withDefaults(defineProps<{
  dataSource: markerDataType[]
}>(), {})
const showChart = ref(true)
const goodsNumber = ref({
  tmall: 0,
  taobao: 0,
})
props.dataSource.forEach(item => {
  if (item.isTmall) {
    goodsNumber.value.tmall++
  }
  else {
    goodsNumber.value.taobao++
  }
})
const options = ref<any>({
  color: ['#ff5f00', '#1890ff'],
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'horizontal',
    left: 'center',
  },
  series: [
    {
      name: '店铺类型',
      type: 'pie',
      radius: '50%',
      data: [
        {
          value:goodsNumber.value.taobao,
          name: '淘宝',
        },
        {
          value: goodsNumber.value.tmall,
          name: '天猫',
        },
      ],
    },
  ],
})
const sourceTable = ref<TableType[]>([])
const filterTable = ref<TableType[]>([])
const tableColumns = ref([
  {
    dataIndex: 'name',
    title: '',
  },
  {
    dataIndex: 'value',
    title: '付款人数',
  }
])
const tableData = ref<{name: string,value: number,}[]>([])

const setPayers = (type: number) => {
  filterTable.value = []
  if (type == -1) {
    filterTable.value = sourceTable.value
  }else {
    filterTable.value = sourceTable.value.filter(item => item.platform == type)
  }
  const totalRealSales = filterTable.value.reduce((a,b) => a + b.realSales,0)
  tableData.value = [
    {
      name: '最小值',
      value:filterTable.value[0].realSales,
    },
    {
      name: '最大值',
      value: filterTable.value[filterTable.value.length -1].realSales,
    },
    {
      name: '平均值',
      value: +((totalRealSales / filterTable.value.length).toFixed(2)),
    },
  ]
}

const init = () => {
  goodsNumber.value.tmall = 0
  goodsNumber.value.taobao = 0
  sourceTable.value = []
  props.dataSource.forEach((item, index) => {
    if (item.isTmall) {
      goodsNumber.value.tmall++
    }
    else {
      goodsNumber.value.taobao++
    }
    const realSales =  typeof item.realSales === 'string' ? parseInt(item.realSales.match(/\d+/)?.[0] || '0') : item.realSales || 0;
    sourceTable.value.push({
      platform: item.isTmall ? 0 : 1,
      realSales: +realSales,
    })
  })
  sourceTable.value.sort((a,b) => a.realSales - b.realSales)
  setPayers(-1)
  nextTick(() => {
    showChart.value = true
  })
}

// 深度监听 dataSource
watch(() => props.dataSource, (newVal) => {
  init()
}, {
  deep: true,
  immediate: true,
})
</script>

<template>
  <a-row type="flex">
    <a-col>
      <Chart
        v-if="showChart"
        style="height: 300px;width: 400px;margin-top: 10px;"
        :options="options"
      />
    </a-col>
    <a-col flex="1">
      <a-table :columns="tableColumns" :data-source="tableData" bordered>
        <template #title>
          <div>
            <span>选择范围:</span>
            <a-select
              ref="select"
              :value="-1"
              style="width: 120px;margin: 0 10px;"
              @change="setPayers"
            >
              <a-select-option :value="-1">全部</a-select-option>
              <a-select-option :value="0">天猫</a-select-option>
              <a-select-option :value="1">淘宝</a-select-option>
            </a-select>
            <span>商品数量:</span>
            <span style="margin-left: 10px;">{{ filterTable.length }}</span>

          </div>
        </template>
      </a-table>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>

</style>
